from dash import html, dcc
import dash_bootstrap_components as dbc
import dash

from dash import dcc

change_password_layout = html.Div(
    [
        html.Div(
            [
                html.H2("设备资产信息管理系统", style={"textAlign": "center", "fontWeight": "bold", "color": "#ffffff", "marginBottom": "10px"}),
                html.H5("修改密码", style={"textAlign": "center", "color": "#0d47a1", "marginBottom": "20px"}),
                dbc.Form(
                    [
                        dbc.Row([
                            dbc.Label("当前密码", width=3, style={"textAlign": "right"}),
                            dbc.Col(dbc.Input(type="password", id="current-password-input", placeholder="请输入当前密码"), width=9),
                        ], className="mb-3"),
                        dbc.Row([
                            dbc.Label("新密码", width=3, style={"textAlign": "right"}),
                            dbc.Col(dbc.Input(type="password", id="new-password-input", placeholder="请输入新密码"), width=9),
                        ], className="mb-3"),
                        dbc.Row([
                            dbc.Label("确认新密码", width=3, style={"textAlign": "right"}),
                            dbc.Col(dbc.Input(type="password", id="confirm-password-input", placeholder="请再次输入新密码"), width=9),
                        ], className="mb-3"),
                        dbc.Button("保存", id="save-change-password-button", color="primary", style={"width": "100%", "marginTop": "10px"}),
                        html.Div(id="change-password-message", className="mt-2", style={"color": "red", "textAlign": "center"}),
                    
                        
                    
                    
                    ]
                ),
            ],
            style={
                "background": "#f5f5f5", # 修改为浅灰色
                "padding": "40px 30px 30px 30px",
                "borderRadius": "10px", # 添加圆角
                "boxShadow": "0 2px 8px rgba(0,0,0,0.1)",
                "width": "350px",
                "margin": "auto",
                "textAlign": "center" # 添加居中样式
            }
        )
    ],
    style={
        "display": "flex",
        "justifyContent": "center",
        "alignItems": "center",
        "height": "80vh",
        "background": "#f5f5f5" # 修改为浅灰色
    }
)

user_manage_layout = html.Div([
    html.H2("用户管理", style={"margin": "30px 0 30px 0", "textAlign": "center", "fontWeight": "bold", "color": "#ffffff"}),
    dbc.Container([
        dbc.Row([
            dbc.Col([
                dbc.Card([
                    dbc.CardHeader(html.H5("新建用户", style={"margin": 0, "color": "#ffffff"})), # 标题颜色改为白色
                    dbc.CardBody([
                        dbc.Form([
                            dbc.Row([
                                dbc.Label("用户名", width=4, style={"textAlign": "right", "color": "#ffffff"}), # 标签颜色改为白色
                                dbc.Col(dbc.Input(id="new-username-input", placeholder="请输入用户名", size="sm"), width=8),
                            ], className="mb-3"),
                            dbc.Row([
                                dbc.Label("密码", width=4, style={"textAlign": "right", "color": "#ffffff"}), # 标签颜色改为白色
                                dbc.Col(dbc.Input(id="new-password-input", type="password", placeholder="请输入密码", size="sm"), width=8),
                            ], className="mb-3"),
                            dbc.Row([
                                dbc.Label("所属机构", width=4, style={"textAlign": "right", "color": "#ffffff"}),
                                dbc.Col(
                                    dcc.Dropdown(
                                        id="new-user-org-input",
                                        options=[],  # 初始为空，通过回调函数动态加载
                                        placeholder="请选择所属机构",
                                        clearable=False,
                                        style={
                                            "fontSize": "14px",
                                            "width": "50%",
                                            "margin": "auto",
                                            "display": "block"
                                            }
                                    ), width=8
                                ),
                            ], className="mb-3"),
                            
                            html.Div(style={"height": "10px"}), # 添加10px的间隙

                            dbc.Button("添加用户", id="add-user-btn", color="primary", style={"width": "30%", "fontWeight": "bold", "fontSize": "16px"}),
                            
                            html.Div(style={"height": "10px"}), # 添加10px的间隙
                        ])
                    ], style={"textAlign": "center"}), # 添加居中样式
                    html.Div(id="user-manage-output", className="mt-3"),
                ], style={"boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "borderRadius": "10px", "background": "#0d47a1", "height": "auto", "minHeight": "220px"}), # 修改为深蓝色，并添加圆角和高度
            ], width=4),

            dbc.Col([
                dbc.Card([
                       dbc.CardBody([
                       html.Div(style={"background": "black","height": "20px"}) # 添加20px的空白行，颜色为浅灰
                    ], style={"textAlign": "center"}) # 添加居中样式
                ])
            ]),
            
            dbc.Col([
                dbc.Card([
                    dbc.CardHeader(html.H5("用户列表", style={"margin": 0, "color": "#ffffff"})), # 标题颜色改为白色
                    dbc.CardBody([
                        html.Div(id="user-table", style={"textAlign": "center"})
                    ], style={"textAlign": "center"}) # 添加居中样式
                ], style={
                    "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", 
                    "borderRadius": "10px", 
                    "background": "#0d47a1",
                    "textAlign": "center",
                    "width":"100%", 
                    "height": "auto",
                     "minHeight": "360px"}), # 修改为深蓝色
                
                # 编辑用户弹窗
                dbc.Modal([
                    dbc.ModalHeader("编辑用户信息", close_button=True, style={
                        #"textAlign": "center",
                        "backgroundColor": "white",  #设置背景色
                        "color": "black" # 确保文字颜色可见
                    }),
                    dbc.ModalBody([
                        dbc.Form([
                            dbc.Row([
                                dbc.Label("用户名", width=8, style={
                                    "textAlign": "right",
                                    "fontSize": "14px",
                                    "color": "black" # 确保文字颜色可见
                                }),
                                dbc.Col(dbc.Input(id="edit-username-input", disabled=True, size="sm", style={
                                    "fontSize": "14px",
                                    "color": "black" # 确保文字颜色可见
                                }), width=4),
                            ], className="mb-3", justify="center"),
                            dbc.Row([
                                dbc.Label("真实姓名", width=8, style={
                                    "textAlign": "right",
                                    "fontSize": "14px",
                                    "color": "black" # 确保文字颜色可见
                                }),
                                dbc.Col(dbc.Input(id="edit-realname-input", size="sm", style={
                                    "fontSize": "14px",
                                    "color": "black" # 确保文字颜色可见
                                }), width=8),
                            ], className="mb-3", justify="center"),
                            dbc.Row([
                                dbc.Label("角色", width=8, style={
                                    "textAlign": "right",
                                    "fontSize": "14px",
                                    "color": "black" # 确保文字颜色可见
                                }),
                                dbc.Col(
                                    dcc.Dropdown(
                                        id="edit-role-input",
                                        options=[
                                            {"label": "普通用户", "value": "user"},
                                            {"label": "管理员", "value": "admin"}
                                        ],
                                        style={
                                            "fontSize": "14px",
                                            "width": "50%",
                                            "margin": "auto",
                                            "display": "block",
                                            "color": "black" # 确保文字颜色可见
                                            }
                                    ), width=8
                                ),
                            ], className="mb-3", justify="center"),
                            dbc.Row([
                                dbc.Label("机构", width=8, style={
                                    "textAlign": "center",
                                    "fontSize": "14px",
                                    "color": "black" # 确保文字颜色可见
                                }),
                                dbc.Col(
                                    dcc.Dropdown(
                                        id="edit-org-input",
                                        options=[
                                            
                                        ],
                                        style={
                                            "fontSize": "14px",
                                            "width": "50%",
                                            "margin": "auto",
                                            "display": "block",
                                            "color": "black" # 确保文字颜色可见
                                            }
                                    ), width=8
                                ),
                            ], className="mb-3", justify="center"),
                            dbc.Row([
                                dbc.Label("状态", width=4, style={
                                    #"textAlign": "center",
                                    "fontSize": "14px",
                                    "color": "black" # 确保文字颜色可见
                                }),
                                dbc.Col(
                                    dcc.Dropdown(
                                        id="edit-active-input",
                                        options=[
                                            {"label": "启用", "value": True},
                                            {"label": "停用", "value": False}
                                        ],
                                        style={
                                            "fontSize": "14px",
                                            "width": "50%",
                                            "margin": "auto",
                                            "display": "block",
                                            "color": "black" # 确保文字颜色可见
                                            }
                                    ), width=8
                                ),
                            ], className="mb-3"),
                        ])
                    ],  style={
                        "width": "auto",
                        "minwidth": "100px",
                        "height": "auto",
                        
                        #"color": "black",
                        #"fontSize": "14px",
                        #"margin": "auto",
                    # "textAlign": "center"
                    }),
                    dbc.ModalFooter([
                        dbc.Button("保存修改", id="save-edit-user-btn", color="success", className="me-2"),
                        dbc.Button("关闭", id="close-edit-user-modal", color="secondary")
                    ], style={
                        #"textAlign": "center",
                        #"fontSize": "14px",
                        #"backgroundColor": "white", # 设置背景色
                        #"color": "black" # 确保文字颜色可见
                    })
                ], id="edit-user-modal", is_open=False, centered=True, size=None,  style={
                        "width": "auto",
                        #"height": "auto",
                        #"minHeight": "320px",
                        #"color": "black",
                    # "fontSize": "14px",
                        #"margin": "auto",
                     "textAlign": "center"
                    }), # 修改为深蓝色
                # 密码初始化弹窗
                dbc.Modal([
                    dbc.ModalHeader("初始化密码", close_button=True),
                    dbc.ModalBody("确定要将该用户密码初始化为123456吗？"),
                    dbc.ModalFooter([
                        dbc.Button("确定", id="confirm-reset-password-btn", color="danger", className="me-2"),
                        dbc.Button("取消", id="cancel-reset-password-btn", color="secondary")
                    ])
                ], id="reset-password-modal", is_open=False, centered=True, size="sm")
            ], width=8)
        ], justify="center")
    ], fluid=True, style={"maxWidth": "800px", "margin": "auto", "display": "block"}),


], style={"background": "black", "minHeight": "100vh","textAlign":"center"}) # 修改为深蓝色
